import { ref, h } from "vue";
import { getEquipModelSelect } from "@/api/equip/archive";
import { getTableData } from "@/api/system/positionManage";
import { getDetectorLedgerStatusOptions, getDetectorLedgerGasNameOptions, queryFacPositionTree } from "@/api/modules/operation";
import { PxIcon } from "px-ui";
import { Download } from "@px-ui/icons-vue";

/**
 * @description: 获取search配置信息
 * @param {boolean} flag
 * @return {Array<CommonSearch.SearchOption>}
 */
export const useSearchOption = (flag: boolean = false): Array<CommonSearch.SearchOption> => {
  const detectorCode: CommonSearch.SearchOption = {
    label: "侦测器",
    key: "detectorCode",
    value: "",
    type: "input",
    placeholder: "请输入侦测器",
    span: 6
  };
  const detectorModel: CommonSearch.SearchOption = {
    label: "设备型号",
    key: "detectorModel",
    value: "",
    type: "select",
    axiosApi: getEquipModelSelect,
    // params: { typeId: 330 },
    params: { categoryId: 82 },
    mapOption({ name: label, id: value }: any) {
      return { label, value };
    },
    placeholder: "请选择设备型号",
    span: 6
  };
  const detectorStatus: CommonSearch.SearchOption = {
    label: "状态",
    key: "detectorStatus",
    value: "",
    type: "select",
    axiosApi: getDetectorLedgerStatusOptions,
    params: null,
    mapOption({ name: label, code: value }: any) {
      return { label, value };
    },
    placeholder: "请选择状态",
    span: 6
  };

  const gasName: CommonSearch.SearchOption = {
    label: "气体类型",
    key: "gasName",
    value: "",
    type: "select",
    remote: true,
    selectRemoteApi: getDetectorLedgerGasNameOptions,
    getParams: (gasName: string) => ({ gasName }),
    mapOption: (item: string) => ({ value: item, label: item }),
    placeholder: "请选择气体类型",
    span: 6
  };

  const positionCode: CommonSearch.SearchOption = {
    label: "设备位置",
    key: "positionCode",
    value: "",
    type: "tree-select",
    axiosApi: queryFacPositionTree,
    params: {},
    treeSelectProps: {
      children: "children",
      label: "name"
    },
    props: {
      filterable: true,
      accordion: true
    },
    placeholder: "请选择设备位置",
    span: 6
  };
  const calibrationDateStart: CommonSearch.SearchOption = {
    label: "标定日期",
    key: "calibrationDateStart",
    realKeys: ["calibrationDateStart", "calibrationDateEnd"],
    value: [],
    type: "daterange",
    span: 6
  };

  return [detectorCode, detectorModel, detectorStatus, gasName, positionCode, calibrationDateStart];
};

/**
 * @description:  获取table表格的表头（cloumns）信息
 * @param {boolean} flag
 * @param {function} cb
 * @return {Array<CommonTable.TableCloumnsType>}
 */
export const useTableCloumns = (flag: boolean = false, cb?: (data: any) => void): Array<CommonTable.TableCloumnsType> => {
  const tagMapOption = new Map([
    [
      "GAS_DETECTOR_RUN",
      {
        value: "GAS_DETECTOR_RUN",
        label: "运行",
        rgb: "16, 185, 129"
        // color: "#10B981",
        // backgroundColor: "#E8F8F3"
      }
    ],
    [
      "GAS_DETECTOR_ISOLATION",
      {
        value: "GAS_DETECTOR_ISOLATION",
        label: "隔离",
        rgb: "245, 158, 11"
        // color: "#F59E0B",
        // backgroundColor: "#FEF5E6"
      }
    ],
    [
      "GAS_DETECTOR_ALARM",
      {
        value: "GAS_DETECTOR_ALARM",
        label: "报警",
        rgb: "239, 68, 68"
        // color: "#EF4444",
        // backgroundColor: "#FEECEC"
      }
    ],
    [
      "GAS_DETECTOR_WARNING",
      {
        value: "GAS_DETECTOR_WARNING",
        label: "故障",
        rgb: "146, 84, 222"
        // color: "#9254DE",
        // backgroundColor: "#F2E7FF"
      }
    ],
    [
      "GAS_DETECTOR_DOWN",
      {
        value: "GAS_DETECTOR_DOWN",
        label: "离线",
        rgb: "144, 147, 153"
        // color: "#909399",
        // backgroundColor: "#F4F4F5"
      }
    ]
  ]);
  const o_1 = { label: "侦测器", prop: "detectorCode", width: 130 };
  const o_2 = { label: "设备型号", prop: "detectorModel", width: 130 };
  const o_3 = { label: "气体类型", prop: "gasName", width: 100 };
  const o_4 = { label: "读值", prop: "readValue", width: 100 };
  const o_5 = {
    label: "状态",
    prop: "detectorStatus",
    width: 80,
    tagMapOption,
    defaultTagValue: "GAS_DETECTOR_DOWN",
    mapRow: ({ row: { detectorStatus: value = "", detectorStatusDesc: label = "" } }: any) => ({ value, label })
  };
  const o_6 = { label: "有效期", prop: "expirationDate", width: 100 };
  const o_7 = { label: "侦测器位置", prop: "detectorPositionName", width: 130 };
  const o_8 = { label: "机台名称", prop: "fabName", width: 100 };
  const o_9 = { label: "机台位置", prop: "fabLocation", width: 100 };
  const o_10 = { label: "标定/更换日期", prop: "strCalibrationDate", width: 120 };
  const o_10_1 = { label: "下次标定/更换日期", prop: "calibrationDateNext", width: 150 };
  const o_10_2 = { label: "标定/更换周期", prop: "signCycle", width: 120 };
  // const o_11 = { label: "提醒设置", prop: "timeLimit", width: 90 };
  const o_12 = {
    label: "报告上传",
    prop: "fileDTOList",
    width: 150,
    render({ row }: any, ins) {
      const { fileDTOList = [] } = row;
      if (!fileDTOList?.length) return () => "--";
      const flag = ref<boolean>(false);
      const onMouseOverHandler = () => {
        flag.value = true;
      };
      const onMouseLeaveHandler = () => {
        flag.value = false;
      };
      if (fileDTOList.length === 1) {
        const { id = "", fileName = "", moduleName = "", originalName = "" } = fileDTOList[0];
        const downloadFn = () => {
          const params = { id, fileName, moduleName };
          const { proxy }: any = ins;
          proxy.download("post", "/sharing/api/v1/file/download", params, row.fileName);
        };
        return () =>
          h(
            <div
              style={{
                width: "100%",
                display: "flex",
                alignItems: "center",
                gap: "2px",
                color: flag.value ? "var(--px-color-primary-light-3)" : "var(--px-color-primary)",
                cursor: "pointer"
              }}
              onMouseOver={onMouseOverHandler}
              onMouseLeave={onMouseLeaveHandler}
              onClick={downloadFn}
            >
              <span style={{ flex: 1, width: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                {originalName || fileName || "--"}
              </span>
              <PxIcon size={18}>
                <Download />
              </PxIcon>
            </div>
          );
      } else {
        const downloadFn = () => {
          cb && cb(fileDTOList);
        };
        return () =>
          h(
            <div
              style={{
                width: "100%",
                color: flag.value ? "var(--px-color-primary-light-3)" : "var(--px-color-primary)",
                cursor: "pointer"
              }}
              onMouseOver={onMouseOverHandler}
              onMouseLeave={onMouseLeaveHandler}
              onClick={downloadFn}
            >
              {"查看文档"}
            </div>
          );
      }
    }
  };
  if (flag) {
    return [o_1, o_2, o_3, o_5, o_6, o_7];
  } else {
    return [o_1, o_2, o_3, o_4, o_5, o_6, o_7, o_8, o_9, o_10, o_10_1, o_10_2, o_12];
  }
};
